<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    height="%height%"
    width="%width%"
    class="cm-component"
    :border="%border%"
    @ready="onReady"
  />
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Editor, EditorConfiguration } from "codemirror";
import Codemirror from "codemirror-editor-vue3";
// mode
%langPath%
%themePath%
const code = ref(`%code%`);

const cmOptions: EditorConfiguration = reactive({
  mode: "%lang%",
  theme: "%theme%",
  readOnly: %readOnly%,
  lineNumbers: true,
  lineWiseCopyCut: true,
  gutters: ["CodeMirror-lint-markers"],
  lint: true,
});

const cminstance = ref<Editor | null>(null);
const onReady = (cm: Editor) => {
  cminstance.value = cm;
  console.log(cm.getValue());
};


</script>
<style lang="less" scoped>
.cm-component {
  font-family: monospace;
}
</style>
